<template>
  <div class="home">
    <header>许愿墙</header>
    <div class="head">
      <div>
        <input type="text" v-model="text" placeholder="请输入你的心愿" @blur="bgc1" />
      </div>
      <div class="head-qiu">
        <div v-for="(item,index) in list"
        :key="index" class="qiu" :style="{background:item.bgc}" @click="bgc1(item.bgc)"></div>
      </div>
      <div>
        <van-button disabled v-show="!a1">再想想</van-button>
        <van-button type="primary" v-show="a1" @click="xy">许愿</van-button>
      </div>
      <div id="yr2">
        <div v-drag v-for="(item,index) in this.$store.state.list1" :key="index"
        :style="{background:item.color,left:item.left,top:item.top}"
        class="yr">{{item.text}} <button @click="xixi(index)">删除</button></div>
      </div>
    </div>
    <div class="a2">
      昵称:{{this.$store.state.list[0]}}
    </div>
  </div>
</template>

<script>
import header from "@/components/header"
export default {
  data(){
    return{
      text:"",
      list:[
        {bgc:"red"},
        {bgc:"blue"},
        {bgc:"black"},
        {bgc:"pink"},
        {bgc:"yellow"}
      ],
      a1:false,
      list1:[],
      y1:''
    }
  },
  methods:{
    bgc1(i){
      this.bgc=i
      if(this.text!=''&&this.bgc!=''){
        this.a1=true
      }else{
        this.a1=false
      }
    },
    xixi(i){
      this.$store.commit('Change3',i)
    },
    xy(){
      this.a1=false
      if(this.list1.length>=4){
        alert('最多提交五个')
        return
        this.text=''
        this.bgc=''
      }else{
        this.list1.push({
          text:this.text,
          color:this.bgc,
          top:parseInt(Math.random()*(200-0
          +1)+1)+'px',
          left:parseInt(Math.random()*(200-0
          +1)+1)+'px',
        })
      }
      this.text=''
      this.bgc=''
      this.$store.commit('Change2',this.list1)
    }
  },
  components:{
    header,
  },
  directives: {
    drag: {
      inserted: (el) => {
        let touch, disX, disY;

        el.ontouchstart = (e) => {
          if (e.touches) {
            //有可能对象在e上也有可能对象在e.touches[0]上
            touch = e.touches[0];
          } else {
            touch = e;
          }

          disX = touch.clientX - el.offsetLeft; //鼠标位置X减去元素距离左边距离（鼠标到元素左边的距离）
          disY = touch.clientY - el.offsetTop; //鼠标位置Y减去距离顶部距离（鼠标到元素顶部的高度）
        };
        el.ontouchmove = (e) => {
          if (e.touches) {
            //有可能对象在e上也有可能对象在e.touches[0]上
            touch = e.touches[0];
          } else {
            touch = e;
          }
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = touch.clientX - disX;
          let top = touch.clientY - disY;
   
          //移动当前元素
          el.style.left = left + "px";
          el.style.top = top + "px";
          e.preventDefault(); //阻止页面的滑动默认事件
console.log(e.target);
        };
      },
    },
  },
};
</script>

<style>
.head-qiu{
  width: 100vw;
  height: 20vh;
  display: inline-flex;
  justify-content: space-around;

}
.qiu{
  margin-top: 5vh;
  width: 15vw;
  height: 15vw;
  border-radius: 50%;
}
.yr{
  width: 20vw;
  height: 20vw;
  text-align: center;
  position: absolute;
}
#yr2{
  width: 100vw;
  height: 60vh;
  position: relative;
overflow: hidden;
}
.about{
  position: relative;
}
.a2{
  position: absolute;
  top: 0;
  left: 0;
}
</style>
